<!-- 车辆统计 -->
<template>
  <el-main>
    <el-form class="common-border pl10 pt10 pr10 mb10" :model="ruleForm" ref="queryForm" size="small" :inline="true" label-width="90px" label-position="right">
      <el-form-item label="车牌号" prop="outCode">
        <el-input
          v-model="ruleForm.licensePlate"
          placeholder="请输入"
          clearable
          style="width:180px"
          :maxlength="50"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车型" prop="status">
        <el-select style="width:220px" v-model="ruleForm.carType" clearable size="small" placeholder="车型">
          <el-option v-for="item of car_type" :label="item.label" :value="item.value" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-form-item label="时间范围" prop="creatTime">
          <el-date-picker
            style="width:220px"
            v-model="timer"
            type="datetimerange"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="onTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-button icon="el-icon-search" type="primary" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="common-border pl5 pt5 pb5 mb10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="onExport(undefined)"
          size="mini"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="list"
      v-table-height="{bottomOffset: 85,callback: height => tableHeight = height}"
      :height="tableHeight"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(ruleForm.pageNum - 1) * ruleForm.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="车牌号" min-width="120" align="center" prop="licensePlate" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="车型" min-width="120" align="center" prop="carType" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{selectDictLabel(car_type, scope.row.carType)}}
        </template>
      </el-table-column>
      <el-table-column label="重量（吨）" min-width="120" align="center" prop="loadCapacity" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseFloat(scope.row.loadCapacity) }}
        </template>
      </el-table-column>
      <el-table-column label="体积（立方）" min-width="120" align="center" prop="volume" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseFloat(scope.row.volume) }}
        </template>
      </el-table-column>
      <el-table-column label="消耗能源" min-width="120" align="center" prop="energyType" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{selectDictLabel(energy_type, scope.row.energyType)}}
        </template>
      </el-table-column>
      <el-table-column label="发车车次数" min-width="120" align="center" prop="carrierNum" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="承运线路" min-width="120" align="center" prop="carrierLine" :show-overflow-tooltip="true"></el-table-column>
<!--      <el-table-column label="承运里程（KM）" min-width="120" align="center" prop="goodSourceList" :show-overflow-tooltip="true">-->
<!--        <template slot-scope="scope">-->
<!--          {{ parseFloat(scope.row.goodSourceList.reduce((total, item) => total + item.num, 0)) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="总承运量（吨）" min-width="120" align="center" prop="goodSourceList" :show-overflow-tooltip="true">-->
<!--        <template slot-scope="scope">-->
<!--          {{ parseFloat(scope.row.goodSourceList.reduce((total, item) => total + item.num, 0)) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="完成承运量（吨）" min-width="120" align="center" prop="finishCarrierQuality" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseFloat(scope.row.finishCarrierQuality) }}
        </template>
      </el-table-column>
<!--      <el-table-column label="承运运单量" min-width="120" align="center" prop="outCode" :show-overflow-tooltip="true"></el-table-column>-->
      <el-table-column label="完成运单量" min-width="120" align="center" prop="finishWaybillNum" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="交易额（万元）" min-width="120" align="center" prop="tradeAmount" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseFloat(scope.row.goodSourceList) }}
        </template>
      </el-table-column>
<!--      <el-table-column label="毛利润（万元）" min-width="120" align="center" prop="goodSourceList" :show-overflow-tooltip="true">-->
<!--        <template slot-scope="scope">-->
<!--          {{ parseFloat(scope.row.goodSourceList.reduce((total, item) => total + item.num, 0)) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="净利润（万元）" min-width="120" align="center" prop="goodSourceList" :show-overflow-tooltip="true">-->
<!--        <template slot-scope="scope">-->
<!--          {{ parseFloat(scope.row.goodSourceList.reduce((total, item) => total + item.num, 0)) }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="发车及时率" min-width="120" align="center" prop="outCode" :show-overflow-tooltip="true"></el-table-column>-->
      <el-table-column label="送达及时率" min-width="120" align="center" prop="servedTimeliness" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="送达超时时长（h）" min-width="120" align="center" prop="servedTimeout" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="时间范围" align="center" prop="timeFrame" width="180">
        <template slot-scope="scope">
          {{scope.row.timeFrame}}
        </template>
      </el-table-column>
<!--      <el-table-column label="操作" fixed="right" min-width="180" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-button type="text" @click="handleDetail(row)">详情</el-button>-->
<!--          <el-button-->
<!--            type="text"-->
<!--            v-if="row.status === '130' && row.scheduleStatus === '401'"-->
<!--            @click="onCancelLoad(row, 1)"-->
<!--          >导出</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <pagination  :total="total" :page.sync="ruleForm.pageNum" :limit.sync="ruleForm.pageSize" @pagination="onPage" />

  </el-main>
</template>

<script>
import {carStatistics,carStatisticsExport} from "@/api/statistics/carrierStatistics";


export default {
  name: "Collection",
  props: [ 'active','car_type','energy_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 1,
      // 表格数据
      list: [],
      // 查询参数
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        licensePlate: undefined,
        carType: undefined,
        endDate: undefined,
        startDate: undefined
      },
      timer: '',
      tableHeight: 0,
      cardHeight: 0,
      dataNum: 0,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      multipleSelection: [],
    };
  },
  watch: {
    active(a, b) {
      a === 'Car' && this.getList()
    }
  },
  created() {
    this.active === 'Car' && this.getList()
  },
  methods: {
    onTime(e) {
      this.ruleForm.startDate = e ? e[0] : undefined
      this.ruleForm.endDate = e ? e[1] : undefined
    },

    onPage(e) {
      this.pageNum = e.page
      this.pageSize = e.limit
      this.getList()
    },

    /** 查询登录日志列表 */
    getList() {
      this.loading = true
      carStatistics(this.ruleForm).then(response => {
        this.loading = false;
        this.list = response.rows;
        this.total = response.total;
      }).finally(()=>{
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    onClose() {
      this.getList()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection
    },
    getNowDate(){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = (month > 9) ? month : ("0" + month);
      day = (day < 10) ? ("0" + day) : day;
      return year + "-" + month + "-" + day;
    },
    /** 导出 */
    onExport(){
      let _this=this
      this.$confirm(`确认导出该车辆统计？`).then(function() {
        _this.loading = true
        carStatisticsExport(_this.ruleForm).then((res) => {
          _this.loading = false
          _this.$message.success('导出成功')

          /** 下载文件 */
          const blob = new Blob([res],{
            // type类型后端返回来的数据中会有，根据自己实际进行修改
            // 表格下载为 application/xlsx，压缩包为 application/zip等，
            type: 'application/xlsx'
          }); //excel,pdf等
          const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
          const a = document.createElement("a"); //创建a标签
          a.style.display = "none";
          a.href = href; // 指定下载链接
          a.download = '车辆统计'+_this.getNowDate()+'.xlsx'; //指定下载文件名
          a.click(); //触发下载
          URL.revokeObjectURL(a.href); //释放URL对象

        }).catch(() => {
          _this.loading = false
        });
      })
    }
  }
};
</script>

<style scoped lang="scss">
.el-main {
  padding: 0;
}

.box {
  display: flex;
  align-items: center;
  margin-left: 100px;
  font: {
    size: 15px;
  }

  p {
    margin: 0 20px;
    span {
      margin: 0 5px;
      color: rgb(3, 148, 249);
      font-weight: bold;
    }
  }
}
</style>
